<template>
	<view class="create-project">
		<uni-notice-bar show-icon scrollable color="#008aff" background-color="#EAF2FF"
			text="创建项目可从项目模板中根据自身需求选择模板创建，项目模板非必选项，也可直接输入项目名称创建项目" />
		<view class="create-project-form">
			<view class="create-item">
				<view class="info-item-title">
					<text class="info-item-title-text">项目名称</text>
					<text class="import">*</text>
				</view>
				<input class="info-item-input" type="text" placeholder-class="placeholderFontClass"
					placeholder="请输入项目名称" v-model="projectName">
			</view>

			<view class="create-item last-item">
				<text class="info-item-title">项目模板</text>
				<input class="info-item-input" type="text" @click="handleTemplate"
					placeholder-class="placeholderFontClass" disabled readonly placeholder="请选择模板"
					v-model="templateName">
				<uni-icons class="right-arrow-icon" type="forward" size="14" color="#999"></uni-icons>
			</view>

			<button class="create-btn" @click.stop.prevent="handleSubmitCreate">确认创建</button>
		</view>
	</view>
</template>

<script>
	import apiRqs from '@/api/api-request.js';
	const HOST = 'https://biapi.vaubang.cn/api/v1';
	const token = uni.getStorageSync('loginInfo').token;
	export default {
		data() {
			return {
				projectName: '',
				templateName: '',
				templateId: "0",
				templateBackData: {},
			}
		},
		onShow() {
			const templateData = uni.getStorageSync("templateBackData");
			if (templateData) {
				this.templateBackData = templateData;
				this.templateName = templateData.name;
				if (this.projectName.trim() == "") {
					this.projectName = templateData.name;
				} else {
					const nameSameState = uni.getStorageSync("nameSameState");
					if (nameSameState) {
						this.projectName = templateData.name;
					}
				}
				this.templateId = templateData.id;
			}
		},
		onUnload() {
			uni.removeStorageSync("templateBackData");
		},
		methods: {
			handleTemplate() {
				if (this.projectName == this.templateName) {
					uni.setStorageSync("nameSameState", true);
				} else {
					uni.setStorageSync("nameSameState", false);
				}
				uni.navigateTo({
					url: "/packageB/template/template-list"
				})
			},
			handleSubmitCreate() {
				let {
					projectName
				} = this;
				if (projectName.trim() == "") {
					getApp().showToast("项目名称不能为空");
				} else {
					this.handleCreateTemplate();
				}
			},
			async handleCreateTemplate() {
				let rqs = {
					"templateId": this.templateId,
					"checkName": this.projectName
				};
				getApp().showLoading();
				await apiRqs._createTemplate(rqs).then((res) => {
					uni.hideLoading();
					if (res.code == 200) {
						uni.showToast({
							title: '创建成功',
							icon: 'success',
							duration: 1500,
							success() {
								setTimeout(() => {
									uni.navigateBack();
								}, 1500)
							}
						})
					} else {
						getApp().showToast(res.msg);
					}
					console.log('res', res);
				}).catch((err) => {
					console.log('err', err);
				})
			},
		},
	}
</script>

<style lang="less">
	page {
		background-color: #f5f5f5;
	}

	.create-project {
		.tips {
			font-size: 12px;
			color: #666;
			margin: 15px;
		}

		.create-project-form {
			margin: 0 20px;
			border-radius: 4px;

			.create-item {
				display: flex;
				align-items: center;
				width: 100%;
				height: 58px;
				line-height: 58px;
				border-bottom: 1px solid #f5f5f5;
				background-color: #fff;
				padding: 0 15px;
				box-sizing: border-box;
				position: relative;

				.right-arrow-icon {
					position: absolute;
					right: 10px;
				}

				&:first-child {
					border-top: 1px solid #f5f5f5;
					border-top-left-radius: 4px;
					border-top-right-radius: 4px;
				}

				&.last-item {
					border-bottom-left-radius: 4px;
					border-bottom-right-radius: 4px;
				}

				.info-item-title {
					width: 80px;
					flex: 0 0 80px;
					font-size: 14px;
					display: flex;
					align-items: center;

					.import {
						font-size: 12px;
						color: red;
					}
				}

				.info-item-input {
					flex: 1;
					font-size: 14px;
					text-align: left;
					color: #666666;
				}

				.placeholderFontClass {
					color: #ddd;
				}
			}

			.create-btn {
				margin: 20px 0;
				border: none;
				background-color: #008aff;
				color: #fff;
				font-size: 15px;
				height: 35pt;
				line-height: 35pt;

				&:active {
					background-color: #0076DB;
				}
			}
		}
	}
</style>
